<template>
  <div>
    <el-card  class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ taskData.assessName }}</span>
        <span class="el-dropdown-link" style="font-size: 20px">
            ({{phaseLabel}})
        </span>
<!--        <el-button class="word" @click="sendData" type="primary" plain>输出文档</el-button>-->
        <el-dropdown class="word" trigger="click" @command="handleCommand">
          <el-button type="primary">
            输出文档<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="pdf">PDF</el-dropdown-item>
            <el-dropdown-item command="docx">Word</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <el-row>
          <el-col :span="24">
            <h3 class="h2Bold" style="margin-bottom: 30px">一、基本情况</h3>
          </el-col>
          <el-col :span="24">
            <div style="width: 90%;margin: auto">
              <el-descriptions :column="4" border>
                <el-descriptions-item label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    姓名
                  </template>
                  {{ pat.patientName }}
                </el-descriptions-item>
                <el-descriptions-item label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    性别
                  </template>
                  {{ gender }}
                </el-descriptions-item>
                <el-descriptions-item label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    年龄
                  </template>
                  {{ pat.patientAge }}
                </el-descriptions-item>
                <el-descriptions-item label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    身份证号
                  </template>
                  {{ pat.patientIdentityNo }}
                </el-descriptions-item>
                <el-descriptions-item :span="4" label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    病情摘要
                  </template>
                  {{ clinic.illnessSummary }}
                </el-descriptions-item>
                <el-descriptions-item :span="4" label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    既往史
                  </template>
                  {{ clinic.preHistory }}
                </el-descriptions-item>
                <el-descriptions-item :span="4" label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    诊断
                  </template>
                  {{ clinic.preDiagnose }}
                </el-descriptions-item>
                <el-descriptions-item :span="2" label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    评定人
                  </template>
                  {{ taskData.doctorName }}
                </el-descriptions-item>
                <el-descriptions-item :span="2" label-style="color:black;background:#f9f9f9" content-style="color:black;">
                  <template slot="label">
                    评定日期
                  </template>
                  {{ assessTime.slice(0,10) }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>


          <el-col>
            <div v-for="(item,index) in comList" :key=index>
              <h3 class="h2Bold">{{ item.titleName }}</h3>
              <div class="containerClass">
                <el-row v-for="(assname,index) in item.assConfig" :key="index" :assname="assname">
                  <el-col :span="22" :offset="1">
                    <keep-alive>
                      <component
                        :is="assname"
                        class="atguigu1"
                        ref="com"
                        :isSearch="isSearch"
                        :istrans="true"
                        :fromdata="fromdata[assname]"
                      ></component>
                    </keep-alive>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-row>
      <div v-show="status<3" style="margin:auto;width: 40%">
        <el-alert
          title="当前状态：未审核"
          type="warning"
          center
          :closable="false"
          description="title"
          show-icon>''
        </el-alert>
      </div>
      <div v-show="status==5" style="margin:auto;width: 40%">
        <el-alert
          title="当前状态：审核未通过"
          type="info"
          center
          :closable="false"
          description=""
          show-icon>审核意见：{{auditOpinion}}
        </el-alert>
      </div>
      <div v-show="status==3" style="margin:auto;width: 40%">
        <el-alert
          title="当前状态：审核已通过"
          type="success"
          center
          :closable="false"
          description="title"
          show-icon>''
        </el-alert>
      </div>
    </el-row>
    <el-footer style="display: flex;justify-content: center; margin-top: 20px" >
      <el-button style="height:40px " @click="fanhui">返 回</el-button>
    </el-footer>
  </div>
</template>

<script>
import {getAssess} from "@/api/gaoxin/assess";
import {listData, updateData} from "@/api/gaoxin/data";
import {getTask, updateTask} from "@/api/gaoxin/taskdata";
import {getClinic, listClinic, listClinicAlive, listClinicbyone} from "@/api/gaoxin/clinic";
import {getPatient} from "@/api/gaoxin/patient";
import {sendWordData, sendPdfData} from "@/api/gaoxin/word";


export default {
  name: "assessDetail",
  created() {
    const taskId = Number(this.$route.query.taskId);
    const patientId = Number(this.$route.query.patientId);
    this.patientId = patientId;
    this.getlistClinic();
    this.taskId = taskId;
    let query = {taskId: taskId};
    listData(query).then(response => {
      let assData = response.rows[0];
      this.fromdata = assData;
      this.phase = assData.phase;
      this.phaseLabel = this.phase == '1' ? "初期" : this.phase == '2' ? "中期" : this.phase == '3' ? "末期" : "";
      this.auditOpinion = assData.auditOpinion;
      this.status=assData.status;

      this.quzhuanyi();

      getTask(taskId).then(response => {
        this.taskData = response.data;
        if(this.taskData.assessTime){
          this.assessTime=this.taskData.assessTime
        }
        this.comList = JSON.parse(this.taskData.assessConfig);
        getPatient(patientId).then(response => {
          this.pat = response.data;
        });
      });
    });
  },

  data() {
    return {
      auditOpinion:'',
      status:'',
      assessTime:'',
      isSearch: true,
      taskId:'',
      phase: '',
      phaseLabel: '评定阶段',
      // 数据项
      fromdata: {},
      pat: {},
      clinic: {},
      preDiagnose: '',
      illnessSummary: '',
      preHistory: '',
      taskData: {},
      clinicList: [],
      assessname: '',
      assessId: '',
      assdata: {},
      assess: {},
      loading: false,
      comList: [],
      doctorname: '',
      patientId: '',
    }
  },
  computed: {
    gender(){
      if(this.pat.patientGender === '0') return '男'
      if(this.pat.patientGender === '1') return '女'
      if(this.pat.patientGender === '2') return '未知'

    },
  },
  methods: {
    /** 查询就诊信息列表 */
    getlistClinic() {
      listClinicAlive({
        patientId: this.patientId,
      }).then(response => {
        this.clinic = response.rows[0];
      });
    },
    fanhui(){
      this.$tab.closePage();
      this.$router.go(-1);
    },
    quzhuanyi() {
      var temp=this.fromdata.assessData;
      var reg=/\\/g;
      let replaceAfter = temp.toString().replace(reg,'');
      this.fromdata=JSON.parse(replaceAfter)
    },
    getass() {
      getAssess(this.assessId).then(res => {
        this.assess = res.data;
        this.comList = JSON.parse(this.assess.assessConfig);
      })
    },
    // 选择 word 或者 pdf 后 触发的事件
    handleCommand(command) {
        this.sendData(command);
    },
    sendData(type) {
      const loading = this.$loading({
        lock: true,
        text: '努力输出中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (type == 'docx') {
        sendWordData({ taskId: this.taskId }).then(response => {
          if(response) {
            loading.close();
            this.$message({
              message: 'word文档输出成功！',
              type: 'success'
            });
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.taskData.assessName + '.docx';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        });
      }
      else {
        sendPdfData({ taskId: this.taskId }).then(response => {
          console.log("taskId",this.taskId)
          if(response) {
            loading.close();
            this.$message({
              message: 'pdf文档输出成功！',
              type: 'success'
            });
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.taskData.assessName + '.pdf';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        });
      }
    },
  }

}
</script>

<style scoped>
.box-card{
  width: 78%;
  margin: 50px auto;
  letter-spacing:0.1em;

}
.clearfix {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
}

.h2Bold {
  font-weight: 600;
  margin: 30px 0 0 0;
}
.containerClass {
  min-height: 80px;
  /*padding: 20px 0;*/
}
.atguigu1 {
  /*pointer-events: none;*/
}
.el-radio-group {
  pointer-events: none;
}
.el-radio /deep/ .el-radio__label{
  font-size: 20px !important;
}

.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.word {
  position: fixed;
  right: 10px;
  top: 130px;
}
.el-dropdown-link {
  font-size: 20px;
  margin-left: 20px;
  color: #409EFF;
}

</style>
